<template>
  <div class="menu-container">
    <div class="menu-box">
      <div class="menu-title-img">
        <!-- <div @click="gotoLogin">LOG IN</div> -->
      </div>
      <!-- <img
        class="menu-title-img"
        src="../static/slider/menuTitleImg.png"
        alt=""
      /> -->
      <div class="menu-title">
        <img src="../static/slider/menuTitle.png" alt="" />
      </div>
      <div class="offerings-box">
        <div
          class="offerings-item"
          v-for="item in offeringsList"
          :key="item.id"
        >
          <div class="offerings-name">{{ item.name }}</div>
          <div class="INGREDIENTS-TITLE">INGREDIENTS:</div>
          <div class="INGREDIENTS-BOX">
            <div class="INGREDIENTS-LIST">
              <div
                class="INGREDIENTS-ITEM"
                v-for="(ingredient, index) in item.chargeMixture"
                :key="index"
              >
                {{ ingredient }}
              </div>
            </div>
            <!-- <div class="menu-num">
              <img :src="item.img" alt="" />
            </div> -->
          </div>
        </div>
      </div>
      <div class="DAILY-CALORIE">
        <div class="calorie-title">EXAMPLES OF DAILY CALORIE INTAKE</div>
        <div class="under-line"></div>
        <div class="calorie-detail">
          <div class="calorie-item">
            <div class="body-arg">
              <div class="body-img">
                <img src="../static/slider/person1.png" alt="" />
              </div>
              <div class="height-weight">
                <div><span>Height:</span>172cm</div>
                <div><span>Weight:</span>68kg</div>
              </div>
            </div>
            <div class="table-th">
              <div></div>
              <div>Fat Loss</div>
              <div>Body Sculpting</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Activity Level/Week</div>
              <div>3-5hrs</div>
              <div>1-3hrs</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Total Calories</div>
              <div>1850kcal</div>
              <div>2150kcal</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Calories Each Meal</div>
              <div>690kcal</div>
              <div>800kcal</div>
            </div>
          </div>
          <div class="calorie-item">
            <div class="body-arg">
              <div class="body-img">
                <img src="../static/slider/person2.png" alt="" />
              </div>
              <div class="height-weight">
                <div><span>Height:</span>165cm</div>
                <div><span>Weight:</span>54kg</div>
              </div>
            </div>
            <div class="table-th">
              <div></div>
              <div>Fat Loss</div>
              <div>Body Toning</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Activity Level/Week</div>
              <div>3-5hrs</div>
              <div>1-3hrs</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Total Calories</div>
              <div>1320kcal</div>
              <div>1540kcal</div>
            </div>
            <div class="table-td">
              <div class="table-tr">Calories Each Meal</div>
              <div>500kcal</div>
              <div>575kcal</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="order-now">
        <div>ORDER NOW</div>
      </div> -->
    </div>
    <div class="menu">
      <div class="hamburger menu" @click="clickMenu">
        <div class="bar" :class="menuClicked ? 'animate' : ''"></div>
      </div>
      <div class="uvnav down" @click="next"></div>
      <div class="uvnav up" @click="prev"></div>
      <!-- <a id="mainlogo" href="#" v-if="currentIndex == 1"><img src="../static/slider/LOGO.png" /> </a> -->
      <a class="cnav tr gohome" href="#" style="" v-if="menuClicked">GO BACK</a>
      <a
        class="cnav tr gohome"
        style="cursor: pointer"
        @click="toLogin"
        v-if="!menuClicked && !isLogin"
        >LOG IN</a
      >
      <a
        class="cnav tr login-text"
        @click="toPerson"
        v-if="!menuClicked && isLogin"
      >
        <div>{{ userInfo.nickName }}</div>
        <img src="../static/slider/avatar.png" alt="" />
      </a>
      <a class="cnav bl contact zt-more" href="#">CONTACT</a>
      <a class="cnav br awards zt-more" href="#">AWARDS</a>
      <div
        class="popup-box"
        :class="{ menuActive: menuClicked }"
        ref="popup_box"
      >
        <div class="popup-body" v-if="menuClicked">
          <div>FOOD</div>
          <div>CHEF</div>
          <div>PLACE</div>
          <div>STORY</div>
          <div>BOOKINGS</div>
          <div>EVENTS</div>
        </div>
        <div class="concat-box" v-if="menuClicked">
          <div class="concat-img">
            <div class="F1"></div>
            <div class="W1"></div>
            <div class="Y1"></div>
          </div>
          <div class="concat-text">
            PRESS ACCESS DUAL BY FIT ISLAND PORTFOLIO
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MENU",
  data() {
    return {
      menuClicked: false,
      offeringsList: [
        {
          id: 1,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num1.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
        {
          id: 2,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num2.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
        {
          id: 3,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num3.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
        {
          id: 4,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num4.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
        {
          id: 5,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num5.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
        {
          id: 6,
          name: "BRAISED DUCK LEG，CORN, GARLIC SHANGHAI GREEN AND FARRO",
          img: require("../static/slider/num6.png"),
          ingredients:
            "DUCK LEG,SHANGHAIGREEN,CARROT,FARRO,OLIVE OIL,GARLIC,BRAISING SAUCE,GARLICBRAISING SAUCE,ONION,CORN KERNELS",
        },
      ],
      isLogin: false,
      userInfo: {},
      queryForm: {
        pageNum: 1,
        pageSize: 99,
      },
    };
  },
  created() {
    this.checkedLoginStatus();
    this.queryMenuList();
  },
  methods: {
    queryMenuList() {
      this.$login.getMenuList(this.queryForm).then((res) => {
        if (res && res.code === "00000") {
          this.offeringsList = res.data.getOrderMenuVoPage;
          this.handleIngredients();

          // this.offeringsList.chargeMixture.split
        }
      });
    },
    checkedLoginStatus() {
      if (this.$user.getToken()) {
        this.isLogin = true;
        this.userInfo = JSON.parse(this.$user.getUserInfo());
      }
    },
    toPerson() {
      this.$router.push({
        name: "PersonCenter",
      });
    },
    toLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    gotoBooking() {
      this.$router.push({
        name: "Booking",
      });
    },
    async prev() {
      this.$router.push({
        name: "MenuPrice",
      });
    },
    async next() {
      this.$router.push({
        name: "DualInfo",
      });
    },
    clickMenu() {
      if (!this.menuClicked) {
        console.log(this.menuClicked, "this.menuClicked");
        this.$refs.popup_box.style.zIndex = 888;
        this.$refs.popup_box.style.width = "100vw";
      } else {
        this.$refs.popup_box.style.width = 0;
      }
      this.menuClicked = !this.menuClicked;
    },
    gotoLogin() {
      this.$router.push({
        name: "Login",
      });
    },
    handleIngredients() {
      this.offeringsList.forEach((item) => {
        item.chargeMixture = item.chargeMixture.split(",");
        console.log(item.chargeMixture, "item.chargeMixture");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-container {
  background-color: rgb(200, 81, 1);
  width: 100vw;
  min-height: 100vh;
  /* padding: 0 20% 0 20%; */
  display: flex;
  justify-content: center;
}

.menu-box {
  background-color: #fff;
  width: 60%;
  min-height: 100vh;
  position: relative;

  .menu-title-img {
    height: 25vh;
    width: 100%;
    margin-bottom: 5vh;
    position: relative;
    > div {
      position: absolute;
      top: 5vh;
      right: 2vw;
      color: #a98c48;
      font-size: 1vw;
      cursor: pointer;
    }
  }
  .menu-title {
    width: 15vw;
    height: 12vh;
    position: absolute;
    top: 14vh;
    right: 3%;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .offerings-box {
    padding: 0 3%;

    .offerings-item {
      // width: 48%;
      margin-bottom: 50px;

      .offerings-name {
        padding: 5px;
        color: #c85000;
        // font-size: 10px;
        font-size: 0.9vw;
        font-weight: 800;
        border-left: 0.5px solid #c85000;
        border-top: 0.5px solid #c85000;
        border-bottom: 0.5px solid #c85000;
      }
      .INGREDIENTS-TITLE {
        color: #a98c48;
        font-size: 0.8vw;
        font-weight: bold;
        padding: 5px;
        border-bottom: 0.5px solid #d2d2d2;
        border-right: 0.5px solid #d2d2d2;
      }

      .INGREDIENTS-BOX {
        padding: 10px 15px;
        min-width: 140px;
        border-bottom: 0.5px solid #d2d2d2;
        border-left: 0.5px solid #d2d2d2;
        display: flex;
        justify-content: space-between;

        .INGREDIENTS-LIST {
          display: flex;
          flex-wrap: wrap;
          flex: 10;
          color: #646464;
          font-size: 0.7vw;
          .INGREDIENTS-ITEM {
            padding: 2px;
            width: 48%;
            height: min-content;
          }
        }
        .menu-num {
          flex: 1;
          height: 140px;

          > img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .DAILY-CALORIE {
    padding: 0 5%;
    margin-bottom: 5vh;
    .calorie-title {
      width: 100%;
      text-align: center;
      color: #646464;
      font-size: 1.2vw;
      font-weight: bold;
    }
    .under-line {
      background-color: #c85000;
      height: 1px;
      width: 100%;
      margin: 0.8vh auto;
    }
    .calorie-detail {
      display: flex;
      justify-content: space-between;
      .calorie-item {
        width: 46%;
        .body-arg {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20px 0;

          .body-img {
            width: 4vw;
            > img {
              width: 100%;
              height: 100%;
            }
          }

          .height-weight {
            display: flex;
            flex-direction: column;
            // align-items: center;
            justify-content: center;
            margin-left: 2.5vw;
            > div {
              margin-bottom: 2vh;
              color: #646464;
              font-size: 0.9vw;
              font-weight: bold;
              > span {
                color: #c85000;
                font-weight: normal;
                margin-right: 0.5vw;
              }
            }
          }
        }

        .table-th {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #646464;
          border-bottom: 1px solid #d2d2d2;

          font-weight: bold;
          > div {
            font-size: 0.9vw;
            flex: 1;
            text-align: center;
            padding: 1vh 0;
          }
        }

        .table-td {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #646464;
          font-weight: bold;
          border-bottom: 1px solid #d2d2d2;
          > div {
            font-size: 0.9vw;

            flex: 1;
            text-align: center;
            padding: 2vh 0 1vh 0;
          }

          .table-tr {
            font-weight: normal;
            color: #c85000;
          }
        }
      }
    }
  }
  .order-now {
    display: flex;
    justify-content: center;
    margin: 150px 0;
    > div {
      width: 250px;
      padding: 10px;
      text-align: center;
      background-color: #a98c48;
      font-weight: bold;
      color: #140a14;
      border-radius: 50px;
      cursor: pointer;
      user-select: none;
    }

    > div:active {
      width: 250px;
      padding: 10px;
      text-align: center;
      background-color: #140a14;
      font-weight: bold;
      color: #a98c48;
      border-radius: 50px;
      cursor: pointer;
    }
  }
}

.cnav.tr {
  top: 30px;
  right: 30px;
}
.cnav.tr img {
  cursor: pointer;
  width: 2.5vw;
  height: 2.5vw;
}

.login-text {
  display: flex;
  align-items: center;
  font-size: 1vw;
  cursor: pointer;

  img {
    margin-left: 0.4vw;
  }
  /* flex-direction: column; */
}
</style>